<script lang="ts" setup>
import useTalkTable from '@/composables/custcare/talk/useTalkTable';
import Chat from './Chat.vue';
import Detail from './Detail.vue';
import Trail from './Trail.vue';
import Record from './Record.vue';
// 表格的数据获取
const { isOpenChat, talkActiveName, handleClick, visitorActiveName, visitorHandleClick, listParam, tableHeight, visitorTable, chatVisitor, recordRef, visitorInfo, onTrailChange } = useTalkTable()
</script>
<template>
    <el-row class="talk">
        <el-col :span="5" :offset="0">
            <el-tabs v-model="talkActiveName" class="talk-tabs" @tab-click="handleClick">
                <el-tab-pane label="在线访客" name="online">
                    <div class="talk" v-for="item in visitorTable.list" @click="chatVisitor(item)">
                        <div class="content">
                            <div class="user">{{ item.client_ip }} {{ item.province }} {{ item.city }}
                            </div>
                            <div class="msg">{{ item.msg }}</div>
                        </div>
                        <div class="count">
                            <div class="bubble" v-if="item.unread_count > 0">
                                {{ item.unread_count }}
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已接访客" name="offline">
                    <div class="talk" v-for="item in visitorTable.list" @click="chatVisitor(item)">
                        <div class="content">
                            <div class="user">{{ item.client_ip }} {{ item.province }} {{ item.city }}</div>
                            <div class="msg">{{ item.msg }}</div>
                        </div>
                        <div class="count">
                            <div class="bubble" v-if="item.unread_count > 0">
                                {{ item.unread_count }}
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-col>
        <el-col :span="14" :offset="0">
            <Chat v-if="isOpenChat" :visitorInfo="visitorInfo.data" @on-trail="onTrailChange"></Chat>
        </el-col>
        <el-col :span="5" :offset="0" style="padding: 5px;">
            <el-tabs v-model="visitorActiveName" class="visitor-tabs" @tab-click="visitorHandleClick">
                <el-tab-pane label="访客" name="visitor">
                    <Detail v-if="isOpenChat" :visitorInfo="visitorInfo.data"></Detail>
                </el-tab-pane>
                <el-tab-pane label="轨迹" name="trail">
                    <Trail v-if="isOpenChat" :visitorInfo="visitorInfo.data"></Trail>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
</template>
